import { Image, Text, View } from "@tarojs/components"
import React from "react"
import Taro from "@tarojs/taro"
import "./index.scss"
import orderIcon from "../../../../assets/images/order-icon.png"
import phoneIcon from "../../../../assets/images/phone.png"
import http from "../../../../utils/http"
import Modal from "../../../../components/Modal"

export default function ({ itemData, onClickStatusButton }) {
  let leftBtn = ""
  let statusBtn = ""
  switch (itemData.status) {
    case 0:
      leftBtn = (
        <View className="take-phone" onClick={() => Taro.makePhoneCall({ phoneNumber: itemData.phone })}>
          <Image src={phoneIcon}></Image>
          <View>联系客户</View>
        </View>
      )
      statusBtn = (
        <View className="change-status" onClick={() => onClickStatusButton("confirm")}>
          确认
        </View>
      )
      break
    case 1:
      leftBtn = (
        <View className="cancel-order" onClick={() => onClickStatusButton("cancel")}>
          取消订单
        </View>
      )
      statusBtn = (
        <View className="change-status" onClick={() => onClickStatusButton("pay")}>
          确认已支付
        </View>
      )
      break
    case 2:
      leftBtn = (
        <View className="cancel-order" onClick={() => onClickStatusButton("cancel")}>
          取消订单
        </View>
      )
      statusBtn = (
        <View className="change-status" onClick={() => onClickStatusButton("threading")}>
          穿线完成
        </View>
      )
      break
    case 3:
      statusBtn = (
        <View className="change-status" onClick={() => onClickStatusButton("take")}>
          确认取拍
        </View>
      )
      break
  }

  const toDetail = () => {
    if (itemData.status == "0") {
      Taro.navigateTo({ url: "/pages/appointmentOrderDetail/index?id=" + itemData.ticketId })
    } else {
      Taro.navigateTo({ url: "/pages/orderDetail/index?id=" + itemData.ticketId })
    }
  }

  return (
    <View className="component-order-item">
      <View className="order-item-header">
        <Image className="order-item-header-icon" src={orderIcon}></Image>
        <View className="order-item-header-title">订单号：{itemData.ticketId}</View>
      </View>
      <View className="order-main" onClick={toDetail}>
        <View className="row">
          <View className="label">球拍信息：</View>
          <View className="value">{`${itemData.racketBrand}/${itemData.threadingType}${
            itemData.threadingType === "自带" ? "" : "/" + itemData.lineType
          }/${itemData.linePound}`}</View>
        </View>
        <View className="row">
          <View className="label">备注：</View>
          <View className="value">{itemData.userRemark || <Text style={{ color: "#aaaaaa" }}>暂无备注</Text>}</View>
        </View>
        <View className="row">
          <View className="label">下单时间：</View>
          <View className="value">{itemData.createdAt}</View>
        </View>
        <View className="btns">
          <View
            className="left-btns"
            onClick={e => {
              e.stopPropagation()
              e.preventDefault()
            }}
          >
            {leftBtn}
          </View>
          <View
            className="right-btns"
            onClick={e => {
              e.stopPropagation()
              e.preventDefault()
            }}
          >
            {statusBtn}
            <View className="detail" onClick={toDetail}>
              查看详情
            </View>
          </View>
        </View>
      </View>
    </View>
  )
}
